<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考场管理-个别安排</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style type="text/css">
        body{
            display: flex;
        }
        #test1{
            /*border: 1px solid black;*/
            width: 60%;
            height: 610px;
            margin-left: 20px;
        }
        #test3{
            margin-left: 20px;
            width: 33%;
            height: 600px;
            /*border: 1px solid black;*/
        }
        #test1 .table-search-fieldset{
            border: 1px solid black;
            width: 770px;
            height: 590px;
            margin-top: 6px;
        }
        .layui-transfer-data{
            border: 1px solid black;
        }
        .layui-form-item{
            margin-bottom: 0;
        }
        .layui-transfer-active .layui-btn-disabled{
            border: 1px solid black;
            color: black;
        }
        #test3 .table-search-fieldset{
            border: 1px solid black;
            height: 590px;
            margin-top: 6px;
            width: 400px;
        }
    </style>
</head>
<body>
<div id="test1">
    <fieldset class="table-search-fieldset">
        <legend>考生安排</legend>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">课程名</label>
                <div class="layui-inline" style="width: 130px;">
                    <select id="course" name="cname">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <button id="btn-search" lay-submit  type="button" class="layui-btn layui-btn-radius layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i>
                        搜索
                    </button>
<!--                    <button type="button" id="helllbtn" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>-->
                </div>
            </div>
        </form>
        <div id="test2" class="demo-transfer"></div>
    </fieldset>
</div>
<div id="test3">
    <form class="layui-form " action="" id="form-search">
        <fieldset class="table-search-fieldset">
            <legend>考试安排</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">考试日期：</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" lay-verify="required" name="examData" class="layui-input" id="examData" placeholder="yyyy-MM-dd">
                    </div>
                </div><br><br><br>
                <div class="layui-inline">
                    <label class="layui-form-label" >考试起始：</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" lay-verify="required" name="examtime" class="layui-input" id="examtime" placeholder="HH:mm:ss">
                    </div>
                </div><br><br><br>
                <div class="layui-inline">
                    <label class="layui-form-label">考试时长(min)：</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" lay-verify="required" name="duration" autocomplete="off" class="layui-input">
                    </div>
                </div><br><br><br>
                <div class="layui-inline">
                    <label class="layui-form-label" >考试机房</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <select id="room" name="roomaddr" lay-filter="demo-select-filter">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div><br><br><br>
                <div class="layui-inline">
                    <label class="layui-form-label" >待排人数</label>
                    <div class="layui-input-inline" style="width: 50px;">
                        <input type="text" value="0" id="stunumber"  name="stunumber" autocomplete="off" class="layui-input" readonly>
                        <input type="text" value="0" id="student" name="students" hidden>
                        <input type="text" value="0" id="courses" name="courses" hidden>
                    </div>
                </div><br><br><br>
                <div class="layui-inline" style="margin-left: 45px">
                    <button id="btn-search2" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i>
                        开始安排
                    </button>
                    <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-sm">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        取消安排
                    </button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['transfer','laydate', 'layer','form', 'util','jquery'], function(){
        var $ = layui.jquery
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;
        var form=layui.form;
        var laydate = layui.laydate;

        layer.msg("可以对指定的部分或个别学生进行单独安排考试时间！");

        function mychange(id) {
            if(id==1) return "花津校区";
            if(id==2) return "赭山校区";
            if(id==3) return "天门山校区";
        }

        //时间选择器
        laydate.render({
            elem:'#examData'
        });
        laydate.render({
            elem: '#examtime',
            type:'time'
        });

        var datas=[];
        $("#btn-search").click(function () {
            $.ajax({
                url:"/selectUnState",
                data:{"cname":$("#course option:selected").text()},
                async:false,
                success:function (res) {
                    for(let i=0;i<res.data.length;i++){
                        let arr={"value":i,"title":res.data[i].id+" "+res.data[i].name+" "+mychange(res.data[i].xiaoqu)};
                        datas.push(arr);
                    }
                    transfer.render({
                        elem: '#test2',
                        title: ['查询到未安排考生', '待安排考生列表'],  //自定义标题
                        data: datas,
                        width: 340, //定义宽度
                        height: 530, //定义高度
                        showSearch: true,
                        id:'key123'
                    });

                    $(".layui-transfer-active button:nth-child(1)").click(function () {
                        var a=$(".layui-transfer div:nth-child(3) ul li").length;
                        $("#stunumber").val(a);
                        console.log(a)
                    });
                }
            });
        });

        function data1(s){
            var date = new Date(s);
            return date.toLocaleTimeString();
        }

        function data2(s){
            var date = new Date(s);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return `${year}-${month}-${day}`;
        }

        form.on('select(demo-select-filter)',function (data) {
            var value=data.value;
            $.ajax({
                url:"/arrange/selectroom",
                data:{"roomname":value},
                success:function (res) {
                    console.log(res)
                    let datas=res.data;
                    let str="<h3>已排考场</h3>";
                    for(let i=0;i<datas.length;i++){
                        str+="<span>"+data2(datas[i].examDate)+'&nbsp;'+data1(datas[i].estartTime)+"-"+data1(datas[i].eendTime)+"</span><br>"
                    }
                    console.log(str)
                    if(res.count!=0){
                        layer.msg(str);
                    }
                }
            });

        });

        form.on('submit(btn-search-filter)',function (data) {
            var getData = transfer.getData('key123');
            // console.log(getData)
            let str="";
            for(let i=0;i<getData.length;i++){
                str+=getData[i].title+"-";
            }
            // console.log($("#course option:selected").text());
            data.field.students=str.slice(0,str.length-1);
            data.field.courses=$("#course option:selected").text();
            // console.log($("#student").val())
            console.log(data.field);
            $.ajax({
                url: "/arrange/individual",
                data:data.field,
                success:function (res) {
                    if(res.state==300||res.state==400||res.state==0){
                        layer.alert(res.message,{
                            icon:2,anim:6
                        },function () {
                            window.location.reload();
                        });
                    }else if(res.state==200||res.state==100){
                        layer.msg(res.message,{
                            icon: 1,
                            time: 3000
                        },function () {
                            window.location.reload();
                        });
                    }
                }
            });
        });

        // form.on('select(carSelect)', function(data) {
        //     console.log(data.value); // 在控制台输出选中项的value值
        // });

        // $('select[name="roomaddr"] option').hover(function() {
        //     console.log($(this).val()); // 在控制台输出鼠标经过的option的value值
        // });

        $("#helllbtn").click(function () {
            var getData = transfer.getData('key123'); //获取右侧数据
            console.log(getData)
        });
    });

    //加载课程名
    var course=[[${cname}]]
    for(let i=0;i<course.length;i++){
        $("#course").append(
            '<option value="'+course[i]+'">'+course[i]+'</option>'
        )
    }

    //加载机房地址
    var roomAddr=[[${roomAddr}]]
    console.log(roomAddr)
    for(let i=0;i<roomAddr.length;i++){
        $("#room").append(
            '<option id="subroomadr" value="'+roomAddr[i]+'">'+roomAddr[i]+'</option>'
        )
    }



</script>
</body>
</html>